<template>
  <el-menu class="top" mode="horizontal" :router="true">
      <el-menu-item index="/home">HOME</el-menu-item>
      <!-- 若学生已登录则显示 学生信息 和 退出 导航链接-->
      <el-menu-item index="/profile" v-if="loggedIn">学生信息</el-menu-item>
      <el-menu-item index="/sign/out" v-if="loggedIn">退出</el-menu-item>
      <!-- 若学生未登录则显示 注册 和 登录 两个导航连接 -->
      <el-menu-item index="/sign/up" v-if="!loggedIn">注册</el-menu-item>
      <el-menu-item index="/sign/in" v-if="!loggedIn">登录</el-menu-item>
      <el-menu-item index="/about" >关于</el-menu-item>
      <el-menu-item index="/panda/1101/大美" >大美</el-menu-item>
      <el-menu-item index="/panda/1202/小美" >小美</el-menu-item>
  </el-menu>
</template>

<script>
import { 
  ElMenu ,
  ElMenuItem
} from 'element-plus';

export default {
  name: 'HeaderView',
  data(){
    return {
      // 采用 loggedIn 来表示学生是否已经登录
      loggedIn: false // 这里约定 false 表示未登录
    }
  },
  methods: {
    checkLoggin(){
      // 尝试从 sessionStorage 中获取已登录的学生信息
      let loggedInStudent = sessionStorage.getItem('LOGGED_IN_STUDENT');
      // 用 loggedIn 来记录登录状态 ( 注意这里使用 双感叹号 )
      this.loggedIn = !!loggedInStudent ;
    }
  },
  created(){
    this.checkLoggin();
  },
  updated(){
    this.checkLoggin();
  },
  components: {
    ElMenu,
    ElMenuItem
  }
}
</script>

<style scoped>
.top {
    height: 10vh;
}
</style>